<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/ztreecommon.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
	    html, body{
	        margin:0;padding:0;border:0;width:100%;height:100%;
	    }    
	    </style>
	<SCRIPT type="text/javascript">
	
		function addParentMenu(){
			$('#id').val('');
			$('#pId').val('');
			$('#name').val('');
			$('#func_url').val('');
			$('#func_order').val('');
		}
		
		function addChildrenMenu(){
			if($('#id').val()==''){
				return toastr.info("请先选择一个菜单", "提示", toastrOptsBottom);
			}
			$('#pId').val($('#id').val());
			$('#id').val('');
			$('#name').val('');
			$('#func_url').val('');
			$('#func_order').val('');
		}
		
		$(document).ready(function(){
			var settingmenu = {
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					beforeClick: beforeClick
				}
			};
			
			function beforeClick(treeId, treeNode) {
				$('#id').val(treeNode.id);
				$('#pId').val(treeNode.pId);
				$('#name').val(treeNode.name);
				$('#func_url').val(treeNode.func_url);
				$('#func_order').val(treeNode.func_order);
				if(treeNode.is_show==1){
					$("input[type=radio][name=is_show][value=1]").attr("checked",true);
				}else{
					$("input[type=radio][name=is_show][value=0]").attr("checked",true);
				}
			};
		
		    $.ajax({
		        url: "${path}/assist/menuZtree",
		        success: function (text) {
					$.fn.zTree.init($("#menutree"), settingmenu, text);
		        },
		        error: function (jqXHR, textStatus, errorThrown) {
		        	toastr.info("与远程服务器交互异常，请规范操作或重新登录", "提示", toastrOptsBottom);
		        }
		    });
		    
		    $('#saveMenu').click(function(){
		    	//var menutree = $.fn.zTree.getZTreeObj("menutree"),
				//menutree = menutree.getSelectedNodes();
				//console.log(menutree);
				//if(menutree==null||menutree.length==0){
				//	return toastr.info("请先选择一个菜单再进行保存", "提示", toastrOptsBottom);
				//}
				
				var inval = $("#func_order").val();
				var re = /^[0-9]*$/;
				if(!re.test(inval)){
					$("#func_order").val("");
					return;
				}
				
				if($('#name').val()==''){
					return toastr.info("菜单名不能为空", "提示", toastrOptsBottom);
				}
				
				//if($('#func_url').val()==''){
				//	return toastr.info("菜单地址不能为空", "提示", toastrOptsBottom);
				//}
				
				var formval = $('#menuform').serialize(); 
				$.ajax({
			        url: "${path}/assist/saveMenu.action",
			        data: formval,
			        success: function (text) {
			        	$.fn.zTree.init($("#menutree"), settingmenu, text.dataset);
			        	toastr.info(text.msg, "提示", toastrOptsBottom);
			        },
			        error: function (jqXHR, textStatus, errorThrown) {
			        	toastr.info("与远程服务器交互异常，请规范操作或重新登录", "提示", toastrOptsBottom);
			        }
			    });
		    });
		    
		    $('#deleteMenu').click(function(){
		    	var menuid = $('#id').val();
		    	if(menuid==''){
		    		return toastr.info("请先选择菜单", "提示", toastrOptsBottom);
		    	}
		    	$.ajax({
			        url: "${path}/assist/deleteMenu.action",
			        data: {id:menuid},
			        success: function (text) {
			        	$.fn.zTree.init($("#menutree"), settingmenu, text.dataset);
			        	toastr.info(text.msg, "提示", toastrOptsBottom);
			        },
			        error: function (jqXHR, textStatus, errorThrown) {
			        	toastr.info("与远程服务器交互异常，请规范操作或重新登录", "提示", toastrOptsBottom);
			        }
			    });
			});
			
			$("#func_order").change(function(){
				var inval = $("#func_order").val();
				var re = /^[0-9]*$/;
				if(!re.test(inval)){
					//toastr.info("顺序输入有误", "提示", toastrOptsBottom);
					$("#func_order").val("");
				}
			});
			
			$('#menutreediv').css("height",document.body.clientHeight);
			$('#menudiv').css("height",document.body.clientHeight);
		})
	    
	</SCRIPT>
	</head>
	<style>
		.ztoolbar{
			background-color:#EEEEEE;
			padding-left:2px
		}
		body{
			
		}
	</style>
	<body>
		
		<div title="菜单" style="float:left;padding:10px;width:30%;overflow-y:auto" id="menutreediv">
	    	<ul id="menutree" class="ztree"></ul>
	    </div>
	    
	    <div title="菜单维护"  style="float:left;width:70%;border:1px solid #EEEEEE" id="menudiv">
	    	<div class="ztoolbar">
				<input class="btn btn-default" type="button" value="新增父节点" onclick="addParentMenu()">
				<input class="btn btn-default" type="button" value="新增子节点" onclick="addChildrenMenu()">
				<input class="btn btn-default" type="button" value="保存" id="saveMenu">
				<input class="btn btn-default" type="button" value="删除菜单及其子菜单" id="deleteMenu">
			</div>
			<form id="menuform" name="menuform" action="" method="post">
				<input type="hidden" name="id" id="id"/>
				<input type="hidden" name="pId" id="pId"/>
				<div style="width:100%;padding-top:50px;text-align:center;">
					<table style="width:100%;padding:2px;text-align:center">
						<tr>
							<td>
								<span>菜单名</span>
							</td>
							<td style="text-align:left">
								<input type="text" placeholder="菜单名" name="name" id="name" style="width:200px;margin:2px" class="form-control">
							</td>
						</tr>
						<tr>
							<td>
								<span>菜单地址</span>
							</td>
							<td style="text-align:left">
								<input name="func_url" id="func_url" placeholder="菜单地址" style="width:80%;margin:2px" class="form-control">
							</td>
						</tr>
						<tr>
							<td>
								<span>菜单序号</span>
							</td>
							<td style="text-align:left">
								<input type="text" placeholder="菜单序号" name="func_order" id="func_order" style="width:200px;margin:2px" class="form-control">
							</td>
						</tr>
						<tr>
							<td>
								<span>是否显示</span>
							</td>
							<td style="text-align:left">
								<div style="margin-top:5px">
									<input type="radio" name="is_show" value="1" checked="checked"/>显示
									<input type="radio" name="is_show" value="0" />不显示
								</div>
								<br>
								<c:forEach items="${fnc:getCommonDataList('work_plan_type')}" var="tpl">
									${tpl.name}<br>
								</c:forEach>
								
							</td>
						</tr>
					</table>
				</div>
			</form>
	    </div>
	    
	</body>
</html>